import React, { memo, useEffect } from "react";
import type { FC, ReactNode } from "react";
import Request from "@/service";
import { useAppDispatch, useAppSelector } from "@/store";
import { fetchBannerDataAction } from "./store/recommend";
import TopBanner from "@/components/TopBanner";


interface IProps {
    children?: ReactNode
}

const Recommend: FC<IProps> = () => {

    const dispatch = useAppDispatch()
    const { banners } = useAppSelector((state) => ({
        banners: state.recommend.banners
    }))

    useEffect(() => {
        // 发起 action 获取数据
        dispatch(fetchBannerDataAction())
    }, [])

    return (
        <div>
            <TopBanner banners={banners} />
        </div>
    )
}

export default memo(Recommend)